import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {Slider, Checkbox} from 'antd';
import SlideInput from '../../common/SlideInput/index';

const CheckboxGroup = Checkbox.Group;

const plainOptions = [
    {label: '联系我们', value: '1'},
    {label: '签到到礼', value: '2'},
    {label: '地址导航', value: '3'}
];

class ShopInfoRowOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {},
            layout: {},
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, layout = {}} = this.state.data;
        var marginTop = parseFloat((style ? style.marginTop : 0) || 0);
        var marginBottom = parseFloat((style ? style.marginBottom : 0) || 0);

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">展示项（选3项）</label>
                    <div className="optsPanel__item__bd">
                        <Checkbox
                            defaultChecked={layout.isLx}
                            onChange={(e) => {
                                this.$dataChange('isLx', e.target.checked, 'layout');
                            }}
                        >联系我们</Checkbox>
                        <Checkbox
                            defaultChecked={layout.isQd}
                            onChange={(e) => {
                                this.$dataChange('isQd', e.target.checked, 'layout');
                            }}
                        >签到有礼</Checkbox>
                        <Checkbox
                            defaultChecked={layout.isKf}
                            onChange={(e) => {
                                this.$dataChange('isKf', e.target.checked, 'layout');
                            }}
                        >客服</Checkbox>
                        <Checkbox
                            defaultChecked={layout.isDz}
                            onChange={(e) => {
                                this.$dataChange('isDz', e.target.checked, 'layout');
                            }}
                        >地址导航</Checkbox>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

            </div>
        );
    }
}

export default ShopInfoRowOpts;
